<!--页脚组件-->
<template>
  <v-footer
      color="#001966"
      class="py-4 d-flex justify-center">
    <v-sheet color="transparent" class="mx-auto w-9/12">
      <v-row no-gutters class="pt-8 d-flex justify-center">
        <!-- order="2" order-md="1"解释：屏幕（宽度）从最小（640px）到大开始，order表示默认的时候与其他的col元素排名，order-md表示当屏幕大于等于md（768px）的时候order的变化。-->
        <!-- 比如order="2" order-md="1"，解释：初始值元素排第一，当屏幕大于等于768px，就变成排第三。-->
        <!--  参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/order-->
        <v-col order="2" order-md="1" cols="6" md="2" class="w-3/12">
          <div class="d-flex justify-center max-w-52">
            <div class="text-sm font-thin leading-7">
              <h1 class="font-weight-bold opacity-100">支付产品</h1>
              <h1>线上收银台</h1>
              <h1>扫码签约</h1>
              <h1>代扣</h1>
              <h1>订阅</h1>
              <h1>线下支付</h1>
              <h1>支付方式</h1>
            </div>
          </div>
        </v-col>
        <v-col order="2" order-md="1" cols="6" md="2" class="w-3/12">
          <div class="d-flex justify-center pb-8">
            <div class="text-sm font-thin leading-7">
              <h1 class="font-weight-bold opacity-100">增强功能</h1>
              <h1>收入增长引擎</h1>
              <h1>合并支付</h1>
              <h1>收单分账</h1>
              <h1 class="opacity-100">数字化营销</h1>
              <h1>A+ Rewards</h1>
              <h1>支付营销</h1>
            </div>
          </div>
        </v-col>
        <v-col order="2" order-md="1" cols="6" md="2" class="w-3/12">
          <div class="d-flex justify-center pb-8">
            <div class="text-sm font-thin leading-7">
              <h1 class="font-weight-bold opacity-100">解决方案</h1>
              <h1>电商平台</h1>
              <h1>资源</h1>
              <h1>文档中心</h1>
              <h1>行业知识</h1>
              <h1>常见问题</h1>
              <h1>客户支持计划</h1>
            </div>
          </div>
        </v-col>

        <!-- <v-col order="3" cols="6" md="2" class="w-52">
          <div class="d-flex justify-center">
            <div class="text-sm font-thin leading-7">
              <h1 class="font-weight-bold">关于我们</h1>
              <h1>关于Antom 安通环球</h1>
              <h1>蚂蚁国际</h1>
              <h1>Alipay+</h1>
              <h1>WorldFirst 万里汇</h1>
              <h1>ANEXT 星熠数字银行</h1>
              <h1>联系我们</h1>
            </div>
          </div>
        </v-col> -->
        <v-col order="3" cols="6" md="2" class="w-3/12">
          <div class="d-flex justify-center">
            <div class="text-sm font-thin leading-7">
              <h1 class="font-weight-bold opacity-100">关注 Antom 安通环球</h1>
                <div class="d-flex mt-4">
                  <div class="w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/08/21/d3ee5ac4-69bb-4c8f-9a36-54c26ded4d43.svg"/>
                  </div>
                  <div class="w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/08/21/e50286ad-1632-4240-a96d-e750ec054c49.svg"/>
                  </div>
                  <div class="w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/08/21/fb2b2122-124e-4164-8e7e-ae263795f2c5.svg"/>
                  </div>
                  <div class="w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/08/21/6e584cfb-424d-4024-9a63-72e3734c9035.svg"/>
                  </div>
                </div>
                <div class="d-flex mt-4">
                  <div class="hover-target1 cursor-pointer relative w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/09/10/7c72ab86-9ead-4338-bc63-04a76f134825.svg"/>
                    <div class="absolute hidden-image1 right-[-80px] top[-110%] hidden">
                        <v-img cover width="180px" height="200px" src="https://cdn.marmot-cloud.com/storage/2024/09/11/d7c15536-1863-4b33-8d45-7eb448cf9667.jpeg"></v-img>
                    </div>
                  </div>
                  <div class="hover-target1 cursor-pointer relative w-[32px] h-[32px] mr-4">
                    <v-img class="" src="https://cdn.marmot-cloud.com/storage/2024/09/11/282bf4ab-3727-4baf-abd3-fb8fc7b5d637.png"/>
                    <div class="absolute hidden-image1 right-[-80px] top[-110%] hidden">
                        <v-img cover width="180px" height="200px" src="https://cdn.marmot-cloud.com/storage/2024/09/11/922e3b4f-c0f3-43fd-85e3-8a566d6abcfe.jpeg"></v-img>
                    </div>
                  </div>
                </div>

            </div>
            <div>
            </div>
          </div>
        </v-col>
        <v-col order="5" cols="12" class="pt-12 pb-12">
          <v-divider thickness="2"></v-divider>
          <div class="mt-10">
              <div class="d-flex justify-between align-center my-4">
                <div class="d-flex justify-between w-4/12 ">
                  <div>
                    <v-img :width="82" :height="24" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/footerlogo-antInternation.66095990.svg"/>
                  </div>
                  <div>
                    <v-img :width="67" :height="24" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/footerLogo-alipay-add.9c4ed097.svg"/>
                  </div>
                  <div>
                    <v-img :width="108" :height="24" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/footerlogo-WF.68c624a5.svg"/>
                  </div>
                  <div>
                    <v-img :width="125" :height="24" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/footerlogo-Abank%201.28a11f3f.svg"/>
                  </div>
                </div>
                <div class="text-xl">
                    <span>网站使用条款</span>
                    <span class="mx-10">Cookie声明</span>
                    <span>© 2024 Antom</span>  
                </div>
              </div>
              <div class="d-flex align-center mt-8">
                <div>
                  <v-img :width="16" :height="16" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/policelogo.e7483e52.png"/>
                </div>
                  <span class="ml-1 mr-4 colorHsla">沪公网安备31011502400860</span>
                  <span class="colorHsla">沪ICP备2021033667号-5</span>
              </div>
          </div>
        </v-col>
      </v-row>
    </v-sheet>
  </v-footer>

</template>

<script setup lang="ts">
import {ref} from "vue";

</script>

<style scoped>
  .colorHsla {
    color: hsla(0, 0%, 100%, .3);
  }

  h1 {
    @apply mb-8 text-xl opacity-70
  }

  .hover-target1:hover .hidden-image1 {
    @apply block
  }
</style>
